<!--  -->
<template>
  <div class="reverse-chose-course">
    <div class="chose-course-top">
      <span
        class="back-arrow"
        @click="handleBack"
      ></span>
      <span class="course-title">{{ showTitle }}</span>
      <a style="color: #27BFA3" @click="choseCourse">选择课程</a>
    </div>
    <div class="list-wrap">
<!--      :class="{-->
<!--      'list-mark1': +item.complete === 0,-->
<!--      'list-mark2': +item.complete === 1,-->
<!--      'list-mark3': +item.complete === 2,-->
<!--      'list-mark4': +item.complete === 3,-->
<!--      'list-mark5': +item.complete === 4,-->
<!--      }"-->
      <div class="list-content list-colum-width">
        <div
          class="chapter-item list-colum-width"
          v-for="item in chapterList"
          :key="item.id"
          @click="chapterClickHandle(item)"
        >
          <span class="chapter-title">{{ item.title }}</span>
          <span class="chapter-finish">{{ item.percentage.toFixed(2) + "%" }}</span>
        </div>
        <div class="list-colum-width blank-seat"></div>
        <div class="list-colum-width blank-seat"></div>
      </div>
      <Empty v-if="!chapterList.length"></Empty>
    </div>
    <choseModal
      :visible.sync="visible"
      :courseList="courseList"
      @courseClick="courseClickHandle"
    />
  </div>
</template>

<script>
import Empty from "@/views/components/empty.vue";
import choseModal from "./choseModal";
import { mapMutations, mapState } from "vuex";
import {fetchChapterList, grammarInfoCheck, grammarList} from "@/api/reverse";
export default {
  components: {
    choseModal,
    Empty
  },
  data() {
    return {
      visible: false,
      courseList: [],
      chapterList: [],
      choseIds: {
        curr_id: "",
        chapters_id: "",
        name: "",
        pack_name: "",
        userId: "",
      },
    };
  },
  computed: {
    ...mapState(["reverseStatus"],{
    }),
    showTitle: function() {
      return this.choseIds.pack_name ? `${this.choseIds.pack_name}·专题列表` : '专题列表';
    },
  },
  watch: {},
  methods: {
    ...mapMutations(["setReverseStatus"]),
    async choseCourse() {
      let res = await fetchChapterList({ userId: this.reverseStatus.userId });
      if (res.data){
        this.visible = true;
        this.courseList = res.data;
      }else {
        this.$message.error('请先购买课程~')
      }
    },
    async courseClickHandle(item) {
      this.choseIds.pack_name = item.name;
      this.visible = false;
      let res = await grammarList({ courseId: item.id ,userId:this.reverseStatus.userId});
      if (res.error === 0) {
        this.chapterList = res.data;
        this.visible = false;
      } else {
        this.$message.error("对不起！课程修订内容中，请稍后...");
      }
      this.choseIds.curr_id = item.id;
    },
    chapterClickHandle(item) {
      this.choseIds.chapters_id = item.id;
      this.choseIds.name = item.title;
      grammarInfoCheck({
        courseId:this.choseIds.curr_id,
        userId:this.reverseStatus.userId,
        packageId:this.choseIds.chapters_id
      }).then((res)=>{
        this.$message.success(res.message);
        this.$router.replace({
          path: '/study/grammar?ref=homepage&userId='+this.reverseStatus.userId,
          // query: {
          //   isBack: true
          // }
        })
      })
      this.setReverseStatus(this.choseIds);

      // this.$nextTick(() => {
      //   this.setReverseStatus(this.choseIds);
      //   this.$router.push({
      //     path: "/reverse",
      //     query: this.choseIds,
      //   });
      // });
    },
    handleBack () {
      this.$router.replace({
        path: '/study/grammar?ref=homepage&userId='+this.reverseStatus.userId,
        // query: {
        //   isBack: true
        // }
      })
    }
  },
  async created() {
    let {title,curr_id} = this.$route.query
    this.choseIds.pack_name = title;
    this.choseIds.curr_id = curr_id;
    this.choseIds.userId = this.$route.query.userId;
    let res = await grammarList({ courseId: curr_id ,userId:this.reverseStatus.userId});
    this.chapterList = res.data;
    // 如果有课程id 直接获取专题列表
    // let { chapters_id, curr_id, pack_name } = this.reverseStatus;
    // this.choseIds = {
    //   // curr_id: curr_id,
    //   // chapters_id: chapters_id,
    //   // pack_name: pack_name,
    // };
    // let res2 = await fetchChapterList({ userId: 15 });
    // // this.chapterList = res.data.list
    // console.log(res2)
    // if (res2.code === SUCCESS_CODE) {
    //   this.chapterList = res2.data.list;
    // }
    // 如果学习过课程进来的默认赋值 curr_id, 因为不需要选课程，不提前set会丢参
    if (this.choseIds.curr_id) {

    } else {
      // console.log("111");
      // // 否则先获取课程
      // let courses = await fetchMycurriculum({ question_type: 3 });
      // if (courses.code === SUCCESS_CODE) {
      //   this.courseList = courses.data;
      // }
      // this.$nextTick(() => {
      //   // 如果只有一个课程无需选择
      //   if (this.courseList.length === 1) {
      //     this.courseClickHandle(this.courseList[0]);
      //   } else if (this.courseList.length > 1) {
      //     // 如果有多个则弹框
      //     this.visible = true;
      //   }
      // });
    }
  },

  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.reverse-chose-course {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 83vh;
  .chose-course-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    background-color: #fff;
    font-size: 20px;
    .back-arrow {
      width: 30px;
      height: 27px;
      background-image: url("@/assets/home/btn_back.png");
      background-size: 100%;
      cursor: pointer;
    }

    .course-title {
      font-size: 20px;
      font-weight: 700;
    }
  }

  .list-wrap {
    flex: 1;
    background: #F0F2F4;
    overflow-y: auto;
    padding: 30px 40px;
    .list-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      align-items: center;
    }
  }
  .chapter-item {
    display: inline-block;
    box-sizing: border-box;
    height: 160px;
    width: 800px;
    background-color: #fff;
    border-radius: 10px;
    padding: 40px 0 40px 50px;
    margin-bottom: 20px;
    background-size: 120px 120px;
    background-repeat: no-repeat;
    background-position: right bottom;
    box-sizing: border-box;
    &:nth-child(2n) {
      margin-right: 0;
    }
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }

    &.list-mark1 {
      background-image: url("@/assets/reverse/list-mark1.png");
    }
    &.list-mark2 {
      background-image: url("@/assets/reverse/list-mark2.png");
    }
    &.list-mark3 {
      background-image: url("@/assets/reverse/list-mark3.png");
    }
    &.list-mark4 {
      background-image: url("@/assets/reverse/list-mark4.png");
    }
    &.list-mark5 {
      background-image: url("@/assets/reverse/list-mark5.png");
    }
    text-align: left;
    span {
      display: block;
    }
    .chapter-title {
      font-size: 30px;
      font-weight: 700;
    }
    .chapter-finish {
      font-size: 20px;
    }
  }
  @media screen and (max-width: 1200px) {
    .chapter-item {
      margin-right: 0 !important;
    }
  }
}
</style>
